<template>
    <div class="index">
        <div class="topBox">

<!--                <div class="box" :style="$store.state.topNav.dialogVisible?'position: relative;right:0.5%;transition:all 0.5 ease 0.5;':''">-->
<!--                <div class="boxOuter">-->
<!--                    <div class="logo"><img src="../../assets/images/logo.png" style="width: 40px;height: 40px"/><p>教学学习平台</p></div>-->
<!--                    <div class="tab">-->
<!--                        <div style="background:rgba(12, 3, 7, .3);border-radius: 15px;">-->
<!--                            <a href="javascript:scroll(0,0)" style="color: #E6E9EF">首页</a>-->
<!--                        </div>-->
<!--                        <div @click="toLogin">课程作业</div>-->
<!--                        <div @click="toLogin">我要学习</div>-->
<!--                    </div>-->
<!--                    <div class="login">-->
<!--                        <span class="showLogin" @click="toLogin">登录</span>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="rightTab">
                    <div class="box">
                        <div class="feedback">
                            <i class="el-icon-message before"/>
                            <div class="after" style="border-radius: 6px 6px 0 0" @click="toLogin"><span>意见<br>反馈</span></div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="phoneNum">
                            <i class="el-icon-phone-outline before"/>
                            <el-tooltip :content="phone" placement="left" effect="light" style="border: #E6E9EF">
                                <div class="after" style="line-height: 50px;"><i class="el-icon-phone-outline"/></div>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="box">
                        <div class="top">
                            <i class="el-icon-top before"/>
                            <div class="after" style="border-radius:0 0 6px 6px">
                                <a href="javascript:scroll(0,0)" style="border-radius:0 0 6px 6px">返回<br>顶部</a></div>
                        </div>
                    </div>
                </div>

          <div class="Header">
            <div class="HeaderBox">
              <!--      Logo-->
              <div class="HeaderImg">
                <img src="../../assets/images/@2xMOOC平台.png" alt="">
              </div>
              <!--      导航-->
              <div class="HeaderNavigation">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="首页"  @click="toLogin" name="first"></el-tab-pane>
                  <el-tab-pane label="课程作业" @click="toLogin" name="second"></el-tab-pane>
                  <el-tab-pane label="我要学习"  @click="toLogin" name="third"></el-tab-pane>
                  <el-tab-pane label="难题解答"  @click="toLogin" name="fourth"></el-tab-pane>
                </el-tabs>
              </div>
              <!--      铃铛-->
              <div class="Bell">
                <i class="el-icon-bell"></i>
              </div>
              <!--      登录-->
              <div class="HeaderLogin">
                <div class="Login"  @click="toLogin"><a href="#">登录</a><span>|</span></div>
                <div class="Resign"><a href="">注册</a></div>
              </div>
            </div>
          </div>

<!--                <div class="slideShow">-->
<!--                    <div class="left">-->
<!--                        <el-carousel  ref="carousel" height="360px" @click.native="getDetail()">-->
<!--                            <el-carousel-item v-for="item in picList" :key="item.url" >-->
<!--                                <img :src="$downloadUrl+item.url" alt="" style="width: 100%;height: 100%">-->
<!--                            </el-carousel-item>-->
<!--                        </el-carousel>-->
<!--                    </div>-->
<!--                    <div class="right">-->
<!--                        <el-card class="box-card">-->
<!--                            <div slot="header" class="clearFix">-->
<!--                                <div class="img"><img src="../../assets/images/logo.png"/></div>-->
<!--                                <div class="message">欢迎来到天亮教育</div>-->
<!--                                <div class="btn"><el-button type="primary" plain round style="width: 120px" @click="toLogin">登 录</el-button></div>-->
<!--                            </div>-->
<!--                            <div class="text item">-->
<!--                                践行技术改变命运的初心<br>-->
<!--                                打造IT职业教育的一面旗帜-->
<!--                            </div>-->
<!--                        </el-card>-->
<!--                    </div>-->
<!--                </div>-->
              <div class="slideShow">
                <el-carousel :interval="5000" arrow="never" autoplay height="360px">
                  <el-carousel-item v-for="item in picList" :key="item.url">
                    <div class="Img" :style="`background-image: url(${$downloadUrl+item.url})`" style="height: 360px;background-repeat: no-repeat;background-position: 50%;background-size: cover"></div>
                    <!--            <img :src="$downloadUrl+item.url" alt="" style="width: 100%;height: 360px" >-->
                  </el-carousel-item>
                </el-carousel>
              </div>
          <div class="middle" id="middle">
                <div class="dynamics">
                    <companyDynamics :DynamicsList="DynamicsList"></companyDynamics>
                </div>
                <div class="publicity">
                    <elegantDemeanor :elegantDemeanor="elegantDemeanor"></elegantDemeanor>
                </div>
            </div>

            <indexBottom></indexBottom>

        </div>
        <el-dialog :visible.sync="loopShow" width="800px">
          <p style="margin: 10px 0px;font-size: 20px">{{carouselTitle}}</p>
            <div class="content" style="padding-top: 20px;" v-html="detailData"></div>
        </el-dialog>

        <div>
            <!--            这是弹出层模态框-->
            <loginDialog :dialogVisible="dialogVisible" @dialogClose="dialogClose"></loginDialog>
        </div>
    </div>
</template>

<script>
import elegantDemeanor from "@/views/index/components/elegantDemeanor";
    import indexBottom from '../../components/indexBottom'
    // import coursePublicity from '../../components/coursePublicity'
    import companyDynamics from '../../components/companyDynamics'
    import loginDialog from './components/loginDialog'
    import { getCourseList, getDynamicsList } from '../../api/welcome'
  export default {
    name: 'index',
    components:{indexBottom,companyDynamics,loginDialog,elegantDemeanor},
    created () {
      this.getDynamicsList()
      this.getCourseList()
      this.$store.dispatch('GET_DICT_LIST')
      this.phone = this.$store.state.dict.dictTree.es_call['remark'].toString()
    },
      mounted() {
          let obj = document.getElementsByClassName('top')
          obj[0].style.width = window.innerWidth+'px'
      },
      data(){
      return{
        detailData:'',
        loopShow:false,
        //轮播图标题
        carouselTitle:'',
        phone:'',
        dialogVisible:false,
        courseList:[],
        DynamicsList:[],
        picList:[],
        activeName: 'first'
      }
    },
    //  监听
      watch:{
          dialogVisible(res){
            console.log(res)
            this.$store.commit("changeDialogVisible",res)
            console.log(this.$store.state.topNav.dialogVisible)
          }
      },
    methods:{
      handleClick(tab, event) {
        console.log(tab, event);
        this.dialogVisible = true
      },
      getDynamicsList(){
        getDynamicsList({pageSize:10,pageNum:1,isLoopShow:0}).then(res=>{
          if(res.code === 200){
            this.picList = res.rows.map(i=>({
              url:i.loopUrls,
              content:i.content,
              title:i.title
            }))
            this.picList=this.picList.filter((i)=>{
              if(i.url!==''){
                return i
              }
            })
          }
        })
        getDynamicsList({pageSize:10,pageNum:1,isShow:0}).then(res=>{
          if(res.code === 200){
            this.DynamicsList = res.rows
          }
        })
      },
      getCourseList(){
        getCourseList({}).then(res=>{
          if (res.code === 200){
            this.courseList = res.rows
          }
        })
      },
      toLogin(){
        this.dialogVisible = true
      },
      dialogClose(){
        this.dialogVisible = false
      },
      //获取轮播图详情
      getDetail(){
        let activeIndex = this.$refs.carousel.activeIndex
        this.detailData = this.picList[activeIndex].content
        this.carouselTitle=this.picList[activeIndex].title
        this.loopShow = true
      }
    }
  }
</script>

<style scoped lang="less">
slideShow{
  //padding-top: 60px;
  Img{
    height: 360px;
  }

}
.Header {
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  height: 70px;

  .HeaderBox {
    width: 1200px;
    height: 70px;
    margin: auto;
    overflow: hidden;
    //background-color: green;
    //Logo
    .HeaderImg {
      float: left;
      width: 199px;
      height: 47px;
      padding: 12px 0 11px 0;

      img {
        width: 100%;
      }
    }

    //导航
    .HeaderNavigation {
      float: left;
      margin: 24px 0;
      margin-left: 242px;
      width: 360px;
      height: 22px;

      /deep/ .el-tabs__item {
        height: 22px;
        line-height: 0px;
        font-size: 15px;
      }

      /deep/ .el-tabs__active-bar {
        //display: none;
        height: 0;
      }

      /deep/ .el-tabs__nav-wrap::after {
        height: 0;
      }
    }

    .Bell {
      float: left;
      //margin-left: 284px;
      margin: 23px 0 24px 284px;
      width: 23px;
      height: 27px;
      line-height: 27px;
    }

    //  登录
    .HeaderLogin {
      float: right;
      overflow: hidden;
      margin-top: 24px;
      margin-right: 10px;
      .Login {
        float: left;

        width: 52px;
        height: 14px;
        font-size: 15px;
        a{
          padding-right: 7px;
        }
      }

      .Resign {
        float: right;
        font-size: 15px;
      }
    }
  }
}
    .select{
        background:rgba(12, 3, 7, .3);
        border-radius: 15px;
    }
    .index{
        //background-image: url("../../assets/images/topBg.png") ;
        height: 100%;
        .rightTab{
            position: absolute;
            right: 45px;
            top: 200px;
            width: 50px;
            height: 152px;
            background: #FFFFFF;
            border: 1px solid #E6E9EF;
            border-radius: 6px;
            .box{
                width: 48px;
                height: 50px;
                border-bottom: 1px solid #E6E9EF;
                overflow: hidden;
                position: relative;
            }
            .before{
                color: #CBD1D5;
                text-align: center;
                font-size: 20px;
                line-height: 50px;
            }
            .after,a{
                background: #39A5EF;
                width: 48px;
                height: 50px;
                font-size: 15px;
                display: table-cell;
                vertical-align:middle;
                text-align: center;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
            }
            .feedback,.phoneNum{
                width: 48px;
                height: 100px;
                &:hover {
                    transform: translate(0,-50%);
                }
            }
            .top{
                width: 48px;
                height: 100px;
                &:hover {
                    transform: translate(0,-50%);
                }
            }
        }
        >.topBox{
            height: 100%;
            >.top{
                height: 80px;
                width: 100%;
                background: #4859c9;
                position: fixed;
                top: 0;
                z-index: 99;
                .boxOuter{
                    width: 1200px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .logo{
                    font-size: 30px;
                    font-family: JBeiWeiKaiSu;
                    align-items: center;
                    display: flex;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 72px;
                    p{
                        margin: 0 10px;
                    }
                }
                .tab{
                    display: flex;
                    width: 400px;
                    margin-left: -300px;
                    justify-content: space-around;
                    div{
                        height: 30px;
                        line-height: 30px;
                        width: 100px;
                        font-size: 14px;
                        margin-left: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #FFFFFF;

                    }
                    div:hover{
                        background:rgba(12, 3, 7, .3);
                        border-radius: 15px;
                    }
                }
                .login{
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #fff;
                    .showLogin:hover{
                        color: #999999;
                    }
                }
            }
            >.middle{
                width: 1200px;
                margin:0px auto;
                //.slideShow{
                //    width: 80%;
                //    height: 400px;
                //    display: flex;
                //    padding-top: 20px;
                //    .left{
                //        width: 960px;
                //        flex-shrink: 0;
                //        margin-right: 18px;
                //    }
                //    .right{
                //        height: 360px;
                //        >.box-card{
                //            width: 220px;
                //            ::v-deep .el-card__body{
                //                padding: 10px;
                //            }
                //            ::v-deep .el-card__header{
                //                padding: 15px 20px;
                //            }
                //            .clearFix{
                //                .img{
                //                    width: 62px;
                //                    height: 62px;
                //                    margin: 29px auto;
                //                }
                //                .message{
                //                    text-align: center;
                //                    font-size: 14px;
                //                    font-family: Microsoft YaHei;
                //                    font-weight: 400;
                //                    color: #999999;
                //                }
                //                .btn{
                //                    padding-top: 21px;
                //                    padding-bottom: 10px;
                //                    text-align: center;
                //                }
                //            }
                //            .text{
                //                font-size: 14px;
                //                font-family: Microsoft YaHei;
                //                font-weight: 400;
                //                color: #999999;
                //                margin: 30px auto;
                //            }
                //        }
                //    }
                //}
            }

        }
    ::v-deep.el-dialog {
        height: auto !important;

        .el-dialog__body {
            .content {
                min-height: 350px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    }
.publicity{
  margin-bottom: 40px;
}
</style>
